<script setup lang="ts">
    import { ref,onMounted,reactive,computed } from 'vue'
    import play from './components/play.vue'
    import bullet from './components/bullet.vue'
    import npc from './components/npc.vue'
    import {Bullet} from './main/bullet'
    import {round_exec,round1} from './round/round1'
    // 对局信息
    const round_tip = reactive({
        fps:0,
        score:0,
        duration:0,
        level:1
    })
    // 获取play组件的暴露对象
    const playref = ref <any> ()
    // 当前按下的按键
    const pressedKeys = {};
    // 子弹数组
    const bullet_list = reactive([])
    // npc数组
    const npc_list = reactive([])
    const bullet_style_computed = (item:any) => {
        var style = {
            top:item.top+'px',
            left:item.left+'px',
        }
        if (item.img !=''){
            style['background'] = item.img
        }else{
            style['background-color'] = item.color
        }
        switch (item.shape){
            case 'rectangle':
                style.width = item.rectangle[0]+'px'
                style.height = item.rectangle[1]+'px'
                style.transform = "rotate("+item.lineAngle+"deg)"
                break
            case 'circular':
                let d = item.circularRadius*2
                style.height = d+'px'
                style.width = d+'px'
                style['border-radius'] = item.circularRadius+'px'
                break
        }
        return style
    }
    // 敌人数组
    const enemy_list = reactive([])
    // 道具数组
    
    // 允许操作的按键
    const commands:String[] = ['ArrowRight','ArrowDown','ArrowLeft','ArrowUp']
    // // 添加按键事件
    document.addEventListener('keydown', (event) => {
        if (commands.includes(event.key)){
            pressedKeys[event.key] = true
            playref.value.keydown(Object.keys(pressedKeys));
        }
    });
    document.addEventListener('keyup', (event) => {
        if (commands.includes(event.key)){
            delete pressedKeys[event.key];
            playref.value.keydown(Object.keys(pressedKeys));
        }
        
    });
    const main = ref()
    // 添加窗口大小变化事件
    window.addEventListener('resize',(event)=>{
        ressize_event()
    });
    function ressize_event(){
        // 调用子组件事件
        playref.value.ressize_event(main)
    }
    onMounted(()=>{
        ressize_event()
    })
    
    ///////////// 关卡 start
    // 切换关卡
    var round_start_time = 0
    var round_info = Object
    function change_round(round_num){
        switch (round_num){
            case 1:
                round_info = round1()
                break
        }
        round_start_time = performance.now()
    }
    ///////////// 关卡end
    
    var num = 0
    let lastTime = performance.now();
    function animation(){
        let currentTime = performance.now();
        
        // fps处理
        if (num>100){
            let deltaTime = currentTime - lastTime;
            round_tip.fps = Math.round(100000 / deltaTime)
            lastTime = currentTime
            num = 0
            if (round_start_time==0){
                change_round(1)
            }
        }else{
            num++
        }
        // 玩家位置刷新
        let res = playref.value.play_update()
        // 子弹位置刷新
        for (let i = 0; i < bullet_list.length; i++) {
            let res = bullet_list[i].update_position()
            // 出屏删除
            if (!res){
                bullet_list.splice(i,1)
                i--;
            }
        }
        // 敌人位置刷新
        for (let i = 0; i < npc_list.length; i++) {
            let res = npc_list[i].update_position()
            // 出屏删除
            if (!res){
                npc_list.splice(i,1)
                i--;
            }
        }
        // 碰撞处理（道具拾取）
        
        // 玩家子弹生成
        for (let element of res) {
            bullet_list.push(element)
        }
        
        // 关卡处理,(敌人生成)
        let npc_res = round_exec(currentTime-round_start_time,round_info)
        for (let element of npc_res) {
            npc_list.push(element)
            console.log(npc_list)
        }
        // 敌人子弹生成
        
        
        
        
        // 再次绘制
        requestAnimationFrame(animation)
    }
    requestAnimationFrame(animation)
</script>

<template>
    <div class="body" ref='main'>
        <div class="fps">
            <div>FPS: {{round_tip.fps}}</div>
            <div>SCORE: {{round_tip.score}}</div>
        </div>
        <div class="info">
            <!-- <div>HP：{{}}</div>
            <div>B：{{}}</div> -->
            
        </div>
        <play ref="playref" @ressize="ressize_event"></play>
        
        <div class="bullet">
            <div v-for="(item,index) in bullet_list">
                <bullet :style="bullet_style_computed(item)">{{item}}</bullet>
            </div>  
        </div>
        
        <div class="npc">
            <div v-for="(item,index) in npc_list">
                <npc :style="bullet_style_computed(item)" :img="item.img">{{item}}</npc>
            </div>  
        </div>
          
    </div>
</template>

<style scoped>
    .fps{
        position: fixed;
        top: 0;
        left: 10px;
        font-size: 20px;
        font-weight: 600;
        color:#fff;
        background-color: ;
    }
    .body{
        background-color: #444444
    }
</style>
